/*
* @version: 2.0
* @Author:  tomato
* @Date:    2018-5-5 11:29:57
* @Last Modified by:   tomato
* @Last Modified time: 2018-5-26 18:08:43
*/
//多选下拉框
layui.define(['jquery', 'layer'], function (exports) {
	var MOD_NAME = 'selectM';
	var $ = layui.jquery, layer = layui.layer;
	var obj = function (config) {
		this.disabledIndex = [];
		//当前选中的值名数据
		this.selected = [];
		//当前选中的值
		this.values = [];
		//当前选中的名称
		this.names = [];

		//初始化设置参数
		this.config = {
			//选择器id或class
			elem: '',
			//候选项数据[{id:"1",name:"名称1",status:0},{id:"2",name:"名称2",status:1}]
			data: [],

			//默认选中值
			selected: [],

			//空值项提示，支持将{max}替换为max			
			tips: '请选择 最多 {max} 个',

			//最多选中个数，默认5
			max: 5,

			//选择框宽度
			width: null,

			//值验证，与lay-verify一致
			verify: '',

			//input的name 不设置与选择器相同(去#.)
			name: '',

			//值的分隔符
			delimiter: ',',

			//候选项数据的键名 status=0为禁用状态
			field: { idName: 'id', titleName: 'name', statusName: 'status' }
		}

		this.config = $.extend(this.config, config);
		//创建选项元素
		this.createOption = function () {
			var o = this, c = o.config, f = c.field, d = c.data;
			var s = c.selected;
			$E = $(c.elem);
			var tips = c.tips.replace('{max}', c.max);
			var inputName = c.name == '' ? c.elem.replace('#', '').replace('.', '') : c.name;
			var verify = c.verify == '' ? '' : 'lay-verify="' + c.verify + '" ';
			var html = '';
			html += '<div class="layui-unselect layui-form-select">';
			html += '<div class="layui-select-title">';
			html += '<input ' + verify + 'name="' + inputName + '" type="text" readonly="" class="layui-input layui-unselect">';
			html += '</div>';
			html += '<div class="layui-input multiple">';
			html += '</div>';
			html += '<dl class="layui-anim layui-anim-upbit">';
			html += '<dd lay-value="" class="layui-select-tips">' + tips + '</dd>';
			for (var i = 0; i < d.length; i++) {
				var disabled1 = '', disabled2 = '';
				if (d[i][f.statusName] == 0) {
					o.disabledIndex[d[i][f.idName]] = d[i][f.titleName];
					disabled1 = d[i][f.statusName] == 0 ? 'layui-disabled' : '';
					disabled2 = d[i][f.statusName] == 0 ? ' layui-checkbox-disbaled layui-disabled' : '';
				}
				html += '<dd lay-value="' + d[i][f.idName] + '" class="' + disabled1 + '">';
				html += '<div class="layui-unselect layui-form-checkbox' + disabled2 + '" lay-skin="primary">';
				html += '<span>' + d[i][f.titleName] + '</span><i class="layui-icon">&#xe605;</i>';
				html += '</div>';
				html += '</dd>';
			}
			html += '</dl>';
			html += '</div>';
			$E.html(html);
		}

		//设置选中值
		this.set = function (selected) {
			var o = this, c = o.config;
			var s = typeof selected == 'undefined' ? c.selected : selected;
			$E = $(c.elem);
			$E.find('.layui-form-checkbox').removeClass('layui-form-checked');
			$E.find('dd').removeClass('layui-this');
			//为默认选中值添加类名
			var max = s.length > c.max ? c.max : s.length;
			for (var i = 0; i < max; i++) {
				if (s[i] && !o.disabledIndex.hasOwnProperty(s[i])) {
					$E.find('dd[lay-value=' + s[i] + ']').addClass('layui-this');
				}
			}
			$E.find('dd.layui-this').each(function () {
				$(this).find('div').addClass('layui-form-checked');
			});
			o.setSelected(selected);
		}

		//设置选中值 每次点击操作后执行
		this.setSelected = function (first) {
			var o = this, c = o.config, f = c.field;
			$E = $(c.elem);
			var values = [], names = [], selected = [], spans = [];
			var items = $E.find('dd.layui-this');
			if (items.length == 0) {
				var tips = c.tips.replace('{max}', c.max);
				spans.push('<span class="tips">' + tips + '</span>');
			}
			else {
				items.each(function () {
					$this = $(this);
					var item = {};
					var v = $this.attr('lay-value');
					var n = $this.find('span').text();
					item[f.idName] = v;
					item[f.titleName] = n;
					values.push(v);
					names.push(n);
					spans.push('<a href="javascript:;"><span lay-value="' + v + '">' + n + '</span><i class="layui-icon">&#x1006;</i></a>');
					selected.push(item);
				});
			}
			spans.push('<i class="layui-edge" style="pointer-events: none;"></i>');
			$E.find('.multiple').html(spans.join(''));
			$E.find('.layui-select-title').find('input').each(function () {
				if (typeof first == 'undefined') {
					this.defaultValue = values.join(c.delimiter);
				}
				this.value = values.join(c.delimiter);
			});

			var h = $E.find('.multiple').height() + 14;
			$E.find('.layui-form-select dl').css('top', h + 'px');
			o.values = values, o.names = names, o.selected = selected;
		}
		//ajax方式获取候选数据
		this.getData = function (url) {
			var d;
			$.ajax({
				url: url,
				dataType: 'json',
				async: false,
				success: function (json) {
					d = json;
				},
				error: function () {
					console.error(MOD_NAME + ' hint：候选数据ajax请求错误 ');
					d = false;
				}
			});
			return d;
		}
	};
	//渲染一个实例
	obj.prototype.render = function () {
		var o = this, c = o.config, f = c.field;
		$E = $(c.elem);
		if ($E.length == 0) {
			console.error(MOD_NAME + ' hint：找不到容器 ' + c.elem);
			return false;
		}
		if (Object.prototype.toString.call(c.data) != '[object Array]') {
			var data = o.getData(c.data);
			if (data === false) {
				console.error(MOD_NAME + ' hint：缺少分类数据');
				return false;
			}
			o.config.data = data;
		}

		//给容器添加一个类名
		$E.addClass('lay-ext-mulitsel');
		if (/^\d+$/.test(c.width)) {
			$E.css('width', c.width + 'px');
		}
		//添加专属的style
		if ($('#lay-ext-mulitsel-style').length == 0) {
			var style = '.lay-ext-mulitsel .layui-form-select dl dd div{margin-top:0px!important;}.lay-ext-mulitsel .layui-form-select dl dd.layui-this{background-color:#fff}.lay-ext-mulitsel .layui-input.multiple{line-height:auto;height:auto;padding:4px 10px 4px 10px;overflow:hidden;min-height:38px;margin-top:-38px;left:0;z-index:99;position:relative;background:#fff;}.lay-ext-mulitsel .layui-input.multiple a{padding:2px 5px;background:#5FB878;border-radius:2px;color:#fff;display:block;line-height:20px;height:20px;margin:2px 5px 2px 0;float:left;}.lay-ext-mulitsel .layui-input.multiple a i{margin-left:4px;font-size:14px;} .lay-ext-mulitsel .layui-input.multiple a i:hover{background-color:#009E94;border-radius:2px;}.lay-ext-mulitsel .danger{border-color:#FF5722!important}.lay-ext-mulitsel .tips{pointer-events: none;position: absolute;left: 10px;top: 10px;color:#757575;}';
			$('<style id="lay-ext-mulitsel-style"></style>').text(style).appendTo($('head'));
		};

		//创建选项
		o.createOption();
		//设置选中值
		o.set();

		//展开/收起选项
		$E.on('click', '.layui-select-title,.multiple,.multiple.layui-edge', function (e) {
			//隐藏其他实例显示的弹层
			$('.lay-ext-mulitsel').not(c.elem).removeClass('layui-form-selected');
			if ($(c.elem).is('.layui-form-selected')) {
				$(c.elem).removeClass('layui-form-selected');

				$(document).off('click', mEvent);
			}
			else {
				$(c.elem).addClass('layui-form-selected');

				$(document).on('click', mEvent = function (e) {
					if (e.target.id !== c.elem && e.target.className !== 'layui-input multiple') {
						$(c.elem).removeClass('layui-form-selected');
						$(document).off('click', mEvent);
					}
				});
			}
		});

		//点击选项
		$E.on('click', 'dd', function (e) {
			var _dd = $(this);
			if (_dd.hasClass('layui-disabled')) {
				return false;
			}
			//点 请选择
			if (_dd.is('.layui-select-tips')) {
				_dd.siblings().removeClass('layui-this');
				$(c.elem).find('.layui-form-checkbox').removeClass('layui-form-checked');
			}
			//取消选中
			else if (_dd.is('.layui-this')) {
				_dd.removeClass('layui-this');
				_dd.find('.layui-form-checkbox').removeClass('layui-form-checked');
				e.stopPropagation();
			}
			//选中
			else {
				if (o.selected.length >= c.max) {
					$(c.elem + ' .multiple').addClass('danger');
					layer.tips('最多只能选择 ' + c.max + ' 个', c.elem + ' .multiple', {
						tips: 3,
						time: 1000,
						end: function () {
							$(c.elem + ' .multiple').removeClass('danger');
						}
					});
					return false;
				}
				else {
					_dd.addClass('layui-this');
					_dd.find('.layui-form-checkbox').addClass('layui-form-checked');
					e.stopPropagation();
				}
			}

			o.setSelected();
		});

		//删除选项
		$E.on('click', 'a i', function (e) {
			var _this = $(this).prev('span');
			var v = _this.attr('lay-value');
			if (v) {
				var _dd = $(c.elem).find('dd[lay-value=' + v + ']');
				_dd.removeClass('layui-this');
				_dd.find('.layui-form-checkbox').removeClass('layui-form-checked');
			}
			o.setSelected();
			_this.parent().remove();
			e.stopPropagation();

		});

		//验证失败样式
		$E.find('input').focus(function () {
			$(c.elem + ' .multiple').addClass('danger');
			setTimeout(function () {
				$(c.elem + ' .multiple').removeClass('danger');
			}, 3000);
		});
	}

	//输出模块
	exports(MOD_NAME, function (config) {
		var _this = new obj(config);
		_this.render();
		return _this;
	});
});